<template>
    <d-col flex="auto" :xs="24" :sm="24" :md="0" class="top-nav">
        <nav>
            <d-collapse v-model="collapseValue">
                <d-collapse-item :title="menuTitle ?? currentTitle" :name="menuTitle ?? currentTitle">
                    <div class="top-menu">
                        <template v-for="item in menuRoutes">
                            <div class="top-menu__item__wrapper" v-if="!item.children.length && item.meta.title !== currentTitle" v-ripple>
                                <router-link :to="`/doc/${item.path}`">
                                    <div class="top-menu__item__wrapper__content">
                                        {{item.meta.title}}
                                    </div>
                                </router-link>
                            </div>
                            <template v-else-if="item.children.length">
                                <d-collapse-item :title="item.meta.title">
                                    <div class="top-menu__item__wrapper" v-for="child in item.children">
                                        <router-link :to="`/doc/${item.path}/${child.path}`">
                                            <div class="top-menu__item__wrapper__content">
                                                {{child.meta.title}}
                                            </div>
                                        </router-link>
                                    </div>
                                </d-collapse-item>
                            </template>
                        </template>
                    </div>
                </d-collapse-item>
            </d-collapse>
        </nav>
    </d-col>
</template>

<script lang="ts" setup>
import {ref, toRefs} from 'vue';
import type {Ref} from 'vue';
import { Node } from '@/router/generateDocRouter';
import { useRoute, useRouter } from 'vue-router';
const routes = useRoute();
const router = useRouter();
const currentTitle:Ref<string> = ref((routes.meta.title as string) ?? '');
const collapseValue:Ref<string[]> = ref([]);
const props = defineProps<{
    menuRoutes: Node[];
    menuTitle?: string;
}>();
const {menuRoutes, menuTitle} = toRefs(props);
router.beforeEach((to) => {
    currentTitle.value = (to.meta.title as string) ?? '';
})
</script>

<style lang="scss" scoped>
.top-nav{
    position: sticky;
    top: 10px;
}
.top-menu{
    .top-menu__item__wrapper{
        .top-menu__item__wrapper__content{
            padding: .7em .25em;
        }
    }
}
</style>